Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at class bindings.
Class Bindings
To let us style our app dynamically, we got to be able to set dynamic classes and styles with it.
One way to set a class is with th object syntax:
<div :class="{ active: isActive }"></div>
active is the name of the class and isActive is the condition when active is toggled on.
active is only on with isActive is truthy.
We can have multiple classes in one object.
For instance, we can write:
<div
class="static"
:class="{ active: isActive, 'has-error': hasError }"
></div>
We have the static static class which is always added.
And we have the class within the :class binding that’s only on when the conditions are truthy.
Bound objects don’t have to be inline, so we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div class="static" :class="classObj"></div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
classObj: {
active: true,
"has-error": false
}
};
}
}).mount("#app");
</script>
</body>
</html>
to pass in classObj as the value of the :class binding.
Array Syntax
We can also have class names in an array.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div :class="[activeClass, errorClass]"></div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
activeClass: "active",
errorClass: "has-error"
};
}
}).mount("#app");
</script>
</body>
</html>
We have the activeClass and errorClass in an array.
We can toggle them on and off with JavaScript code.
If we want to toggle a class conditionally, we can write ternary expressions for them.
For example, we can write:
<div :class="[isActive ? activeClass : '', errorClass]"></div>
activeClass is only added is isActive is truthy.
Otherwise, the expression returns an empty string.
Classes With Components
We can add classes with components.
For instance, if we have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<hello-world class="baz qux"></hello-world>
</div>
<script>
const app = Vue.createApp({});
app.component("hello-world", {
template: `<p class="foo bar">hello world</p>`
});
app.mount("#app");
</script>
</body>
</html>
We created the hello-world component with the foo and bar classes on the p element.
In addition, we have the baz and qux class on the hello-world component itself.
The classes from both places will be combined since the p element is the root element of the component.
So the baz and qux class will be added to the p element.
Class bindings also work.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<hello-world :class="{ active: isActive }"></hello-world>
</div>
<script>
const app = Vue.createApp({
data() {
return {
isActive: true
};
}
});
app.component("hello-world", {
template: `<p class="foo bar">hello world</p>`
});
app.mount("#app");
</script>
</body>
</html>
We have the active class combined with the foo and bar classes on the p element since isActive is true .
Conclusion
We can add HTML classes dynamically with an object or an array.
They can be added to Vue components and HTML elements.
If they’re added to a component, then they’ll be added to the root element of the component.
